<template>
  <!-- <div class="login">
    <div class="login-left-wrapper">
      <div class="text">
      </div>
    </div> -->
    <div class="login-right-wrapper" v-if="islogin">
      <div class="login-right-top" @click="gohome()">返回首页</div>
      <div class="title">
        <h1>您好！</h1>
        <p>欢迎登录联安官网</p>
      </div>
      <a-form :form="form" class="login-form" :hideRequiredMark="true" @submit="handleSubmit">
        <a-form-item label="请输入登录类型">
          <a-radio-group v-decorator="[
            'ZHLB',
          ]"
            :options="plainOptions" 
          >
          <!-- <span slot="label" slot-scope="{ value }" style="color: red">{{ value }}</span> -->
        </a-radio-group>
        </a-form-item>
        <a-form-item label="请输入手机号">
          <a-input
            size="large"
            type="text"
            v-decorator="[
              'businessName',
              { rules: [{ required: true, message: '请输入账号!', whitespace: true, trigger: 'change' }] },
            ]"
          >
            <a-icon slot="suffix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
          </a-input>
        </a-form-item>
        <a-form-item label="验证码">
          <a-input
            class="code-input"
            size="large"
            type="text"
            v-decorator="[
              'password',
            ]"
          >
          </a-input>
          <span class="code">
            <div class="obtain" v-if="!obtainLoading" @click="obtainCode()" style="width:120px; height:40px">请获取验证码</div>
            <div class="obtain" v-else style="width:120px; height:40px">{{Countdown}}秒后重发</div>
          </span>
        </a-form-item>
        <a-form-item>
          <!-- <a-checkbox v-decorator="['remember', { valuePropName: 'checked', initialValue: false }]" >记住密码</a-checkbox> -->
          <a class="login-form-forgot"  @click="register()">注册账号</a>
          <a-button
            type="primary"
            size="large"
            html-type="submit"
            class="login-form-sign"
            :loading="loginLoading"
            @click="handleSubmit"
          >登录</a-button
          >
        </a-form-item>
      </a-form>
    </div>
    <div class="register-right-wrapper" v-else>
      <div class="title">
        <h1>您好！</h1>
        <p>欢迎来到联安共享后台管理系统</p>
      </div>
      <a-form :form="form" class="login-form" :hideRequiredMark="true" @submit="handleSubmit">
        <a-form-item label="请输入注册类型">
          <a-checkbox-group v-decorator="[
            'ZHLB',
          ]"
            :options="plainOptions" 
          >
          <!-- <span slot="label" slot-scope="{ value }" style="color: red">{{ value }}</span> -->
        </a-checkbox-group>
        </a-form-item>
        <a-form-item label="请输入手机号">
          <a-input
            size="large"
            type="text"
            v-decorator="[
              'businessName',
              { rules: [{ required: true, message: '请输入账号!', whitespace: true, trigger: 'change' }] },
            ]"
          >
            <a-icon slot="suffix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
          </a-input>
        </a-form-item>
        <a-form-item label="验证码">
          <a-input
            class="code-input"
            size="large"
            type="text"
            v-decorator="[
              'bPassword',
            ]"
          >
          </a-input>
          <span class="code">
            <div class="obtain" v-if="!obtainLoading" @click="obtainCode()" style="width:120px; height:40px">请获取验证码</div>
            <div class="obtain" v-else style="width:120px; height:40px">{{Countdown}}秒后重发</div>
          </span>
        </a-form-item>
        <a-form-item>
          <!-- <a-checkbox v-decorator="['remember', { valuePropName: 'checked', initialValue: false }]" >记住密码</a-checkbox> -->
          <a class="login-form-forgot"  @click="register()">前往登录</a>
          <a-button
            type="primary"
            size="large"
            html-type="submit"
            class="login-form-sign"
            :loading="loginLoading"
            @click="handleRegister"
          >注册</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  <!-- </div> -->
</template>

<script>
import md5 from 'md5'
import Cookies from 'js-cookie'
import { encryptionParameters, decryptionParameters } from '@/utils/encrypt'
import { mapActions } from 'vuex'
import store from '@/store/index'
import { makeCode } from '@/utils/util'

const plainOptions = [
  {
    label:'供应商',
    value: 1
  },
  {
    label:'采购商',
    value:2
  }];

export default {
  data () {
    return {
      loginLoading: false,
      obtainLoading: false,
      Countdown:60,
      verifyCode: '',
      timer:null,
      islogin:true,
      form: this.$form.createForm(this, { name: 'loginForm' }),
      plainOptions
    }
  },
  created () {
    this.code()
  },
  mounted () {
    // console.log('Cookies.get',Cookies.get('LIANLGU'),Cookies.get('LIANLGP'),JSON.parse(decryptionParameters(Cookies.get('LIANLGU'))),JSON.parse(decryptionParameters(Cookies.get('LIANLGP'))))
    if (Cookies.get('LIANLGU') && Cookies.get('LIANLGP')) {
      // cookie 存在则默认填充用户名和密码
      this.$nextTick(function () {
        this.form.setFieldsValue({
          username: JSON.parse(decryptionParameters(Cookies.get('LIANLGU'))),
          password: JSON.parse(decryptionParameters(Cookies.get('LIANLGP'))),
          remember: true
        })
      })
    }
  },
  watch: {
    Countdown: function () {

    }
  },
  methods: {
    ...mapActions(['Login','Register','ObtainCode']),
    code () {
      makeCode({ target: '#identify' }, (result) => {
        this.verifyCode = result
      })
    },
    gohome() {
      this.$router.push({ path: '/reception/findServices/index' });
    },
    register() {
      this.islogin = !this.islogin
    },
    obtainCode() {
      const {
        ObtainCode,
      } = this
      this.form.validateFields((err, values) => {
        ObtainCode(
          {
            _MobelNos:values.businessName
          }
        ).then((res) => {
        })
      })
      this.obtainLoading = true

      this.timer = setInterval( () => {
        this.Countdown --
        if (this.Countdown <= 0) {
        clearInterval(this.timer)
        this.timer = null;
        this.Countdown = 60
        this.obtainLoading = false
      }
      },1000)
    },
    //注册
    handleRegister(e) {
      const {
        Register
      } = this
      this.form.validateFields((err, values) => {
        Register(
          {
            businessName:values.businessName,
            ZHLB:values.ZHLB,
            bPassword:values.bPassword
          }
        ).then((res) => {
          this.$notification.open({
          message: '',
          description:res.msg,
      });
        })
      })
    },
    handleSubmit (e) {
      e.preventDefault()
      const {
        Login
      } = this

      this.form.validateFields((err, values) => {
        if (!err) {
          this.loginLoading = true
          Login(
            {
              username:values.businessName + '|' + 1,
              password:values.password,
              grant_type:'password'
            }
          )
            .then((res) => {
                // this.loginSuccess(res)
                // localStorage.getItem('resLoginusername', values.businessName);
                // localStorage.setItem('resLoginpassword', values.password);
                window.open('http://localhost:8000/reslogin', '_blank');


            })
            .catch(err => this.requestFailed(err))
            .finally(() => {
              this.loginLoading = false
            })
        }
      })
    },
    loginSuccess (res) {
        this.$router.push({ path: '/' })
      this.isLoginError = false
    },
    requestFailed (err) {
      console.log(err)
      this.isLoginError = true
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).data || {}).error || '请求出现错误，请稍后再试',
        duration: 4
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  min-width: max-content;
  min-height: 600px;
  display: flex;
  .login-left-wrapper {
    flex: 2;
    background-image: url('~@/assets/lianan/login-resbg.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    .text {
      margin-top: 363px;
      margin-left: 123px;
      h1 {
        color: #fff;
        font-size: 72px;
        margin-bottom: 0;
        letter-spacing: 10px;
      }
    }
  }
  .login-right-wrapper {
    position: absolute;
    top: 300px;
    left: 1050px;
    // padding: 102px 84px 0;
    background-image: url('~@/assets/lianan/login-bg2.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 406px;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
    .login-right-top{
      position: absolute;
      top: -90px;
      left: -60px;
      cursor: pointer;
      color: #1e66be;
    }
    .title {
      h1 {
        margin-bottom: 6px;
        font-size: 36px;
        line-height: 36px;
        font-weight: 400;
      }
      p {
        font-size: 20px;
        color: #c9cdd4;
        font-weight: 400;
      }
      
    }
    .login-form {
      margin-top: 6px;
    }
    .login-form-forgot {
      float: right;
      color: #cccccc;
      font-size: 18px;
    }
    .login-form-sign {
      width: 100%;
      margin-top: 41px;
    }
    .code-input {
      width: 65%;
    }
    .code {
      float: right;
      cursor: pointer;
      .obtain{
        border: #acd2ff 1px solid;
        text-align: center;
        border-radius: 10px;
      }
    }
  }
  .register-right-wrapper {
    position: absolute;
    top: 300px;
    left: 1050px;
    // padding: 102px 84px 0;
    background-image: url('~@/assets/lianan/login-bg2.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 406px;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
    .title {
      h1 {
        margin-bottom: 6px;
        font-size: 36px;
        line-height: 36px;
        font-weight: 400;
      }
      p {
        font-size: 20px;
        color: #c9cdd4;
        font-weight: 400;
      }
    }
    .login-form {
      margin-top: 6px;
    }
    .login-form-forgot {
      float: right;
      color: #cccccc;
      font-size: 18px;
    }
    .login-form-sign {
      width: 100%;
      margin-top: 41px;
    }
    .code-input {
      width: 65%;
    }
    .code {
      float: right;
      cursor: pointer;
      .obtain{
        border: #acd2ff 1px solid;
        text-align: center;
        border-radius: 10px;
      }
    }
  }
}
</style>
<style lang="less">
.login {
  .ant-form label {
    font-size: 18px;
    color: #798593;
  }
  // .ant-form-item {
  //   margin-bottom: 16px;
  // }
}
</style>
